<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix text-center title">
      <el-button
        size="small"
        plain
        style="float: left"
        :disabled="item.order === 1"
        @click="order(item.order, item.order - 1)"
      >
        <i class="el-icon-caret-left" ></i>
      </el-button>
      <span style="line-height: 33px">{{ item.order }}. {{ item.name }}</span>
      <el-button
        size="small"
        plain
        style="float: right"
        :disabled="item.order === total"
        @click="order(item.order + 1, item.order)"
      >
        <i class="el-icon-caret-right"></i>
      </el-button>
    </div>
    <div :style="{ backgroundImage: `url(https://asset.u-link.club/${item.page_url})` }" class="image"></div>
    <div class="text-center">
      <el-button type="primary" plain @click="edit(item)">修改信息</el-button>
      <el-button type="danger" plain @click="del(item)">删除章节</el-button>
    </div>
  </el-card>
</template>

<script>
import { deleteChapter, setChapterOrder } from '../../../api/chapter'
export default {
  name: 'ChapterCard',
  props: {
    item: {
      type: Object,
      default: function() {
        return {}
      }
    },
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    series: {
      type: Number,
      default: null
    },
    total: {
      type: Number,
      default: null
    }
  },
  methods: {
    switchOrder(curOrder, tarOrder) {
      const config = {}
      for (const i in this.list) {
        if (this.list[i].order === curOrder) {
          config.current = this.list[i].id
          config.curOrder = tarOrder
        } else if (this.list[i].order === tarOrder) {
          config.target = this.list[i].id
          config.tarOrder = curOrder
        }
      }
      return config
    },
    order(curOrder, tarOrder) {
      const config = this.switchOrder(curOrder, tarOrder)
      console.log(config)
      setChapterOrder(config).then(() => {
        this.$SUCCESS('章节更新成功')
        this.$reload()
      }).catch(() => {
        this.$ERROR('章节更新失败')
      })
    },
    edit(item) {
      this.$emit('edit', JSON.parse(JSON.stringify(item)))
    },
    del(item) {
      this.$confirm('此操作将删除该章节以及该章节下的所有关卡, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const config = {
          id: item.id,
          order: item.order,
          series: this.series
        }
        console.log(config)
        deleteChapter(config).then(response => {
          if (response.code === 10001) {
            this.$WARNING(response.msg)
          }
          if (response.code === 20000) {
            this.$SUCCESS('删除章节成功')
          }
          this.$reload()
        }).catch(() => {
          this.$ERROR('删除章节失败')
        })
      })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
    .title{
        margin-top: 5px;
        font-size: 18px;
        line-height: 18px;
    }
    .image {
        width: 248px;
        height: 186px;
        background-position: center center;
        background-size: cover;
        overflow: hidden;
        margin: auto auto 20px;
    }
</style>
